<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href=".//CSS/css/reset.css">
    <style>
        .box{
            position: relative;
            width: 590px;
            height: 470px;
            margin: 30px auto;
        }
        
        .box1 li{
            
            position: absolute;
            
        }
        .box1 li:nth-child(3){
            z-index: 3;
        }
        .tubiao{
            position: absolute;
            bottom: 20px;
            left: 30px;
            z-index: 99;

        }
        .tubiao a{
            width: 10px;
            height: 10px;
            background-color:rgba(0, 0, 0, .05);
            float: left;
            border-radius: 50%;
            margin: 0px 2px;
            background-clip: content-box;
            border: 2px solid transparent;
            

        }
        .tubiao a:hover{
            border: 2px solid rgba(0, 0, 0, .05);
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="box1">
            <li>
                <a><img src="https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e3/144372e7/cr/s/q.jpg"></a>
            </li>
            <li>
                <a href=""><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/152424/40/27705/94599/61614161E7718469e/b5ef0eafff9c4463.jpg.webp" alt=""></a>
            </li>
            <li>
              <a href=""><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/184524/11/20503/78706/612c7a2cE09a7485b/62369901f2d6e18f.jpg.webp" alt=""></a>
            </li>
            <li>
                 <a href=""><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e0/0f1863cd/cr/s/q.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/172005/23/20450/52536/60f7cb1cE1fe4688c/3b125aa8d979a4a3.jpg.webp" alt=""></a>
            </li>
            <li>
             <a href=""> <img src="https://imgcps.jd.com/ling4/100014352539/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6ec/6289961e/cr/s/q.jpg" alt=""></a>
            </li>
            <li>
               <a href=""> <img src="https://imgcps.jd.com/ling4/100026667904/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f7/40623b98/cr/s/q.jpg" alt=""></a>
            </li>
            <li>
               <a href=""><img src="https://imgcps.jd.com/ling4/100026667878/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e8/88e305a5/cr/s/q.jpg" alt=""></a>
            </li>
        </ul>
        <div class="tubiao">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </div>
        
    </div>
</body>
</html>